<template>
	<div class="home">
		<div class="wrapper content">
			<swiper :banners="banners"></swiper>
			<tab-category :categorys="categorys" @itemClick="itemClick"></tab-category>

			<template v-for="(item, index) in categorys" :key="item.id">
				<section-category :category="item"></section-category>
			</template>
		</div>
	</div>
</template>

<script setup>
	import { useHomeStore } from '@/store/home'
	import { storeToRefs } from 'pinia'
	const homeStore = useHomeStore()
	const { banners, categorys } = storeToRefs(homeStore)

	const itemClick = (item) => {
		return navigateTo({
			path: '/oppo-detail',
			query: {
				type: item.type,
			},
		})
	}
</script>

<style lang="scss" scoped>
	.home {
		background-color: $bgGrayColor;
	}
</style>
